<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始摇动手机</title>
    <script src="/plugins/JQuery/jquery.min.js"></script>
    <style>
        body {
            background-image: linear-gradient(135deg, rgb(255, 111, 216) 10%, rgb(56, 19, 194) 100%);
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow-y:auto;
        }
        #ulid{
            list-style:none;
            font-size: 300px;
            text-align: center;
            color: gold
        }
        .title{
            font-size: 40px;
            text-align: center;
            color: #c3ccc3;
        }
    </style>
</head>
<body onload="init()" style="background-color: aliceblue">
<p class="title">用力摇一摇你手机</p>
<ul id="ulid" type="circle">0
</ul>
</body>
<script>
    var username;
    $(function () {
        setTimeout(toPage, getCookie('activityLength') * 1000);
    })
    //######################################################
    var last_update = 0;
    var x = y = z = last_x = last_y = last_z = 0;
    var num = 0;
    var isprint = false;
    function init() {
        if (window.DeviceMotionEvent) {
            window.addEventListener("devicemotion", motionHandler, false);
        } else {
            alert('抱歉，当前浏览器不支持摇一摇，请用微信浏览器访问');
        }
    }
    function motionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime - last_update) > 100) {
            // var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            // var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
            var x1 = Math.abs(x-last_x);
            var y1 = Math.abs(y-last_y);
            var z1 = Math.abs(z-last_z);
            var max =0;
            if(x1>y1){
                if(x1>z1){
                    max=x1;
                }else{
                    max=z1;
                }
            }else {
                if(y1>z1){
                    max=y1;
                }else{
                    max=z1;
                }
            }
            if(max>40){
                isprint=true;
                num++;
            }else if(max<5&&isprint){
                var node = document.getElementById("ulid");
                node.innerText=num;
                isprint=false;
                upData();
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }


    function upData(){
        var url = "/updateData.do";
        var param = {};
        username = decodeURI(getCookie("username"));
        openId = decodeURI(getCookie("openId"));
        gender = decodeURI(getCookie("gender"));
        param.username =  username;
        param.openId =  openId;
        param.gender =  gender;
        param.data = num;
        $.post(url,param,function () {

        })

    }
    function toPage(){
        //提交数据
        upData();
        window.location.href="/pagejump"
    }
    //读取cookies
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name)  == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

</script>
</html>